import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';



void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: AnimationDemo(),
    );
  }
}


class AnimationDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AnimationDemo();
}

class _AnimationDemo extends State<AnimationDemo> with TickerProviderStateMixin {
  Map<int, AnimationController> _animationController = {};
  List<String> picString = [
    "https://b3logfile.com/bing/20180221.jpg?imageView2/1/w/960/h/540/interlace/1/q/100",
    "http://bgweb.yundatainfo.com/uploadFiles/uploadImgs/20190910/f81cb770dd004658bddbf57c7d2ed965.jpg",
    'http://img.haote.com/upload/20180918/2018091815372344164.jpg',
    "https://img0.baidu.com/it/u=1330784235,4146572500&fm=26&fmt=auto&gp=0.jpg"
  ];

  @override
  void initState() {
    picString.forEach((v) {
      _animationController[picString.indexOf(v)] = AnimationController(duration: const Duration(milliseconds: 500), vsync: this);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemBuilder: (BuildContext context, int index) {
            return SizeTransition(
              sizeFactor: Tween(begin: 1.0, end: 0.0).animate(CurvedAnimation(
                parent: _animationController[index],
                curve: Curves.fastOutSlowIn,
              )),
              axis: Axis.horizontal,
              axisAlignment: 1.0,
              child: GestureDetector(
                onTap: () {
                  _animationController.forEach((key, value) {
                    print(key);
                  });

                  if (_animationController.containsKey(index)) {
                    _animationController[index].forward().then((value) {
                      _animationController.remove(index);
                      picString.removeAt(index);
                      setState(() {});
                    });
                  }
                },
                child: CachedNetworkImage(
                  width: 100,
                  height: 100,
                  useOldImageOnUrlChange: true,

                  /// imageUrl的淡入动画的持续时间。
                  imageUrl: picString[index],
                  fit: BoxFit.cover,
                  // 指定缓存宽高
                  memCacheWidth: 150,
                  memCacheHeight: 150,
                  placeholder: (context, url) => Container(
                    color: Colors.white,
                  ),
                  errorWidget: (context, url, e) {
                    return Container(
                      color: Colors.white,
                    );
                  },
                ),
              ),
            );
          },
          itemCount: picString.length,
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
  }
}